<!--
 * @Description: 展示影片详情
 * @Author: Kerwin
 * @Date: 2025-04-27 17:30:11
 * @LastEditTime: 2025-05-30 12:01:39
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="container">
    <view class="top">
      <!-- 展示影片信息 -->
      <view class="showdy">
        <view class="item">
          <view class="item-l">
            <van-image
              width="100%"
              height="232rpx"
              :src="movieInfo.posterUrl"
            />
          </view>
          <view class="item-r">
            <view class="nr">
              <view class="bt overwz"> {{ movieInfo.movieName }} </view>
              <view class="xq">
                <view
                  >评分：<text style="color: #ff6c18; font-size: 24rpx">{{
                    movieInfo.grade ? movieInfo.grade : '暂无'
                  }}</text></view
                >
                <view
                  >{{ movieInfo.duration }}分钟 /
                  {{ movieInfo.movieType ? movieInfo.movieType : '暂无' }}</view
                >
                <view>{{ handleDate(movieInfo.publishDate) }}上映</view>
                <view class="typebox">
                  <template v-if="typeLIst.length > 0">
                    <view class="lx" v-for="ele in typeLIst">{{ ele }}</view>
                  </template>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="text-container" :class="{ expanded: isExpanded }">
          <view class="content" :class="{ collapsed: !isExpanded }">
            <view class="bt">电影简介：</view>
            {{ movieInfo.intro ? movieInfo.intro : '暂无' }}
          </view>
          <text class="toggle-btn" @click="toggleExpand">
            {{ isExpanded ? '收起' : '展开' }}
            <u-icon
              :name="isExpanded ? 'arrow-up' : 'arrow-down'"
              size="14"
            ></u-icon>
          </text>
        </view>
      </view>
    </view>
    <!-- 展示导演和演员 -->
    <view class="middle">
      <view>
        <view class="bt">导演</view>
        <view class="peoples">
          <van-swipe
            :loop="false"
            :autoplay="0"
            :touchable="true"
            :show-indicators="false"
            class="custom-swipe"
            v-if="directorInfo.length > 0"
          >
            <van-swipe-item
              v-for="(ry, index) in directorInfo"
              :key="index"
              style="width: 122rpx"
            >
              <view class="rygroup">
                <view>
                  <van-image
                    fit="cover"
                    round
                    width="122rpx"
                    height="122rpx"
                    :src="ry.avatar"
                  />
                </view>
                <view style="margin: 10rpx 0" class="overwz">{{
                  ry.scName
                }}</view>
              </view>
            </van-swipe-item>
          </van-swipe>
          <tetx v-else style="color: #ccc">暂无图片</tetx>
        </view>
      </view>
      <view>
        <view class="bt">演职人员</view>
        <view class="peoples">
          <van-swipe
            :loop="false"
            :autoplay="0"
            :touchable="true"
            :show-indicators="false"
            class="custom-swipe"
            v-if="actorsInfo.length > 0"
          >
            <van-swipe-item
              v-for="(ry, index) in actorsInfo"
              :key="index"
              style="width: 122rpx"
            >
              <view class="rygroup">
                <view>
                  <van-image
                    fit="cover"
                    round
                    width="122rpx"
                    height="122rpx"
                    :src="ry.avatar"
                  />
                </view>
                <view style="margin: 10rpx 0" class="overwz">{{
                  ry.scName
                }}</view>
                <view style="color: #999">
                  <!-- <text>饰</text> -->
                  饰
                  <view class="overwz">
                    {{ ry.actName }}
                  </view>
                </view>
              </view>
            </van-swipe-item>
          </van-swipe>
          <tetx v-else style="color: #ccc">暂无图片</tetx>
        </view>
      </view>
    </view>
    <!-- 展示剧照 -->
    <view class="footer">
      <view class="jqz"
        ><view class="bt">剧情照</view
        ><view style="color: #999; font-size: 24rpx"
          >全部{{ imageList.length }}张</view
        ></view
      >
      <view>
        <van-swipe
          :loop="false"
          :autoplay="0"
          :touchable="true"
          :show-indicators="false"
          class="custom-swipe"
          v-if="imageList.length > 0"
        >
          <van-swipe-item
            v-for="(img, index) in imageList"
            :key="index"
            style="width: 265rpx"
          >
            <van-image width="265rpx" height="380rpx" :src="img" fit="cover" />
          </van-swipe-item>
        </van-swipe>
        <tetx v-else style="color: #ccc">暂无图片</tetx>
      </view>
      <view class="gp" v-if="movieInfo.publishStatus == 'HOT'">
        <u-button
          type="primary"
          shape="circle"
          @click="handleGoSelectCinema"
          style="width: 750rpx"
          >购票</u-button
        >
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad, onShow, onReady, onReachBottom } from '@dcloudio/uni-app'
import { IMovieInfo, IArea } from '@/packageF/components/movieInterface'
import { useMovieStore, useShopInfoStore } from '@/store/index'
const movieStore = useMovieStore()
// 影片信息
const movieInfo = ref<IMovieInfo>({
  movieName: '',
  grade: '',
  duration: '',
  movieType: '',
  posterUrl: '',
  publishDate: '',
  intro: '',
  cast: '',
  director: '',
  publishStatus: '',
  movieId: ''
})
// 演员信息
const actorsInfo = ref<
  {
    avatar: string
    scName: string
    actName: string
  }[]
>([{ avatar: '', scName: '', actName: '' }])
// 导演信息
const directorInfo = ref<
  {
    avatar: string
    scName: string
  }[]
>([{ avatar: '', scName: '' }])
// 剧照
const imageList = ref()
const isExpanded = ref(false)
// 电影类型数组
const typeLIst = ref([])

onLoad((option: any) => {
  const tempData = JSON.parse(decodeURIComponent(option.data))
  movieInfo.value = tempData
  imageList.value = tempData.plotUrl.split(',')
  if (tempData.movieType != '') {
    typeLIst.value = tempData.movieType.split('|')
  }
  movieInfo.value.movieType = movieInfo.value.movieType.replaceAll('|', ',')
  actorsInfo.value = tempData.producer.actors
  directorInfo.value = tempData.producer.director
  console.log('电影参数', movieInfo, typeLIst)
})
onShow(() => {
  console.log(
    '详情获取的状态机数据',
    movieStore.xzCityId,
    movieStore.xzCityName
  )
})

// 处理日期格式
const handleDate = (date: string) => {
  const [year, monthStr, dayStr] = date.slice(0, 10).split('-')
  const month = parseInt(monthStr, 10)
  const day = parseInt(dayStr, 10)
  // 处理月份和天：小于10时直接显示数字，大于等于10时保持原样
  const formattedMonth = month < 10 ? month : month
  const formattedDay = day < 10 ? day : day
  // 返回格式化后的字符串
  return `${year}年${formattedMonth}月${formattedDay}日`
}
// 点击展开或收起
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}
// 点击购票跳转选择影院页面
const handleGoSelectCinema = () => {
  uni.navigateTo({
    url: '/packageF/pages/selectCinema/index'
  })
  uni.setStorageSync('movieData', JSON.stringify(movieInfo.value))
}
</script>

<style lang="scss" scoped>
.container {
}
.top {
  background-color: #fff;
  margin-bottom: 20rpx;
  .showdy {
    .item {
      width: 702rpx;
      height: 268rpx;
      background: #ffffff;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      .item-l {
        width: 162rpx;
        height: 232rpx;
        border: 1rpx solid #dbdbdbdb;
        border-radius: 5rpx;
        margin-right: 20rpx;
      }
      .item-r {
        flex-grow: 1;
        height: 232rpx;
        display: flex;
        align-items: center;
        font-size: 24rpx;
        .nr {
          height: 100%;
          width: 0rpx;
          flex-grow: 1;
          margin-right: 20rpx;
          .bt {
            font-size: 32rpx;
            color: #000;
            font-weight: bold;
            margin-bottom: 20rpx;
          }
          .xq {
            color: #666666;
            .typebox {
              display: flex;
              align-items: center;
              .lx {
                width: 72rpx;
                height: 38rpx;
                background: #eeeeee;
                border-radius: 4rpx;
                color: #666666;
                font-size: 24rpx;
                text-align: center;
                margin-right: 20rpx;
                line-height: 38rpx;
              }
            }
            > view {
              margin-bottom: 10rpx;
            }
          }
        }
      }
    }
  }
  .text-container {
    font-size: 24rpx;
    color: #666666;
    max-width: 600px;
    margin: 0px auto;
    padding: 15px;
    padding-top: 0rpx;
    border-radius: 8px;
  }
  .content {
    line-height: 1.6;
    margin-bottom: 10px;
    .bt {
      font-weight: 400;
      font-size: 28rpx;
      color: #000;
      margin-bottom: 5rpx;
    }
  }
  .collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 限制显示行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .toggle-btn {
    color: #ff6c18;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }
  .toggle-btn .u-icon {
    margin-left: 4px;
    transition: transform 0.3s;
  }
  .expanded .toggle-btn .u-icon {
    transform: rotate(180deg);
  }
}
.middle,
.footer {
  width: 702rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin: 0 auto;
  padding: 20rpx;
  .bt {
    color: #000;
    font-size: 28rpx;
    font-weight: 400;
  }
}
.middle {
  margin-bottom: 20rpx;
  .bt {
    margin-bottom: 10rpx;
  }
  .rygroup {
    width: 125rpx;
    font-size: 24rpx;
    text-align: center;
  }
}
.footer {
  .jqz {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
  }
  .gp {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 缩小间距 */
.custom-swipe .van-swipe-item {
  padding: 10rpx !important; /* 调整右侧间距 */
}
.overwz {
  //   单行文本省略号
  width: 100%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
}
</style>
